<template>
  <div>
    <button @click="comName = 'MyLeft'">展示left</button>
    <button @click="comName = 'MyRight'">展示right</button>
    <!-- <MyLeft></MyLeft>
    <MyRight></MyRight> -->
    <!-- 动态组件，使用component 标签 :is="属性值"  属性值是要展示的组件名 -->
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from "./components/MyLeft.vue";
import MyRight from "./components/MyRight.vue";
export default {
  data() {
    return {
      comName: "MyLeft",
    };
  },
  components: {
    MyLeft,
    MyRight,
  },
  methods: {},
};
</script>

<style>
</style>